<template>
    <div>
        <div class="vs-search-box" style="padding: 24px 22px; display: flex; justify-content: space-between">
            {{ utils.useOptionChain(userInfo.store.title) }}，欢迎你~
            <div v-if="doorType == 1">门店余额：{{ advance_money }}元</div>
        </div>
        <div class="vs-table-box" v-loading="loading">
            <div>门店数据汇总</div>
            <div class="flex ai-c">
                <div class="room-chin flex" v-for="(item, index) in dataList" :key="index">
                    <img :src="item.img" alt="" />
                    <div>
                        <div class="title">{{ item.title }}</div>
                        <div>
                            <span v-if="!index">金额：￥</span>
                            <span v-else>数量：</span>
                            {{ item.num }}
                        </div>
                    </div>
                </div>
            </div>
            <div class="flex ai-c">
                <div style="margin-right: 30px">总营业收入</div>
                <el-date-picker @change="getData" v-model="value2" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :picker-options="pickerOptions"> </el-date-picker>
            </div>
            <div class="flex" style="margin-top: 30px">
                <div style="margin-left: 20px">
                    <div>假发收入</div>
                    <div style="margin: 20px 50px">{{ special_amount.toFixed(2) }}元</div>
                    <div>其他收入</div>
                    <div style="margin: 20px 50px">{{ other_amount.toFixed(2) }}元</div>
                </div>
                <div id="main" style="width: 80%; height: 450px"></div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {
        data() {
            return {
                dataList: [
                    // { img: 'https://api.yiweika.net/uploads/2022/07/26/09c5fa2007ab5cc9d1fa3d8c44c2db8d.png', title: '今日销售总额', num: 0 },
                    // { img: 'https://api.yiweika.net/uploads/2022/07/26/5221524e484238e61bc2300ba639d788.png', title: '今日销售订单', num: 0 },
                    // { img: 'https://api.yiweika.net/uploads/2022/07/26/d042b04dbd5d2c803ff14d07684a066e.png', title: '今日开卡会员', num: 0 }
                    {
                        img: 'https://api.yiweika.net/uploads/2022/07/26/9ba558cbe5d7deb5ee19387fdb52e91a.png',
                        title: '今日销售总额',
                        num: 0,
                    },
                    {
                        img: 'https://api.yiweika.net/uploads/2022/07/26/e20322f0b2caf658d27ae2d29bd66c86.png',
                        title: '今日销售订单',
                        num: 0,
                    },
                    {
                        img: 'https://api.yiweika.net/uploads/2022/07/26/9add19cfed9d42d0ab4f202966b838ae.png',
                        title: '今日开卡会员',
                        num: 0,
                    },
                ],
                loading: false,
                pickerOptions: {
                    shortcuts: [
                        {
                            text: '近7天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '近30天',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                        {
                            text: '近1年',
                            onClick(picker) {
                                const end = new Date();
                                const start = new Date();
                                start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
                                picker.$emit('pick', [start, end]);
                            },
                        },
                    ],
                },
                value2: '',
                doorList: [],
                special_amount: 0,
                other_amount: 0,
                advance_money: 0,
                doorType: 1,
            };
        },
        created() {
            this.getStore(this.userInfo.store_id);
        },
        computed: {
            ...mapState('user', ['userInfo']),
        },
        mounted() {
            //  默认时间一周
            let end = this.$moment(new Date()).format('YYYY-MM-DD');
            let start = new Date();
            start = this.$moment().startOf('month').format('YYYY-MM-DD');
            this.value2 = [start, end];
            this.getData();
        },
        methods: {
            async getStore(id) {
                this.loading = true;
                let { code, data } = await this.$Http.getStore({ id });
                this.loading = false;
                if (code) {
                    this.advance_money = data.advance_money;
                    this.doorType = data.type;
                }
            },
            // 默认获取店铺数据
            async getData() {
                let parms = {
                    store_id: this.userInfo.store_id,
                };
                if (this.value2) {
                    parms.date = JSON.parse(JSON.stringify(this.value2));
                    parms.date[0] = this.$moment(this.value2[0]).unix();
                    parms.date[1] = this.$moment(this.value2[1]).unix();
                    parms.date = JSON.stringify(parms.date);
                } else {
                    // 默认一周
                    parms.date = 1;
                }
                this.loading = true;
                let { code, data } = await this.$Http.getHome(parms);
                this.loading = false;
                if (code) {
                    this.dataList[0].num = data.sale_amount.sale_amount || '0.00';
                    this.dataList[1].num = data.sale_count.count || 0;
                    this.dataList[2].num = data.card_count.count || 0;
                    this.other_amount = data.other_amount;
                    this.special_amount = data.special_amount;
                    // data.data  图表的数据
                    this.drawEcharts(data.data);
                }
            },
            weekFn(val) {
                let arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
                return arr[val];
            },
            async drawEcharts(data) {
                var echarts = require('echarts');
                let xName = [];
                let xData = [];
                for (let i in data) {
                    xName.push(`${data[i].date}（${this.weekFn(data[i].week)}）`);
                    xData.push(data[i].sale_amount);
                }

                if (myChart != null && myChart != '' && myChart != undefined) {
                    myChart.dispose();
                }
                //基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 绘制图表
                myChart.setOption({
                    // title: {
                    //     text: "订单统计表",
                    //     x: "right",
                    //     y: "top",
                    // },
                    // legend: {
                    //     data: ["订单量"],
                    // },
                    tooltip: {
                        trigger: 'axis',
                    },
                    xAxis: {
                        type: 'category',
                        data: xName,
                        // name: "日期",
                    },
                    yAxis: {
                        type: 'value',
                        // name: "单位（单）",
                        show: true,
                    },
                    series: [
                        {
                            name: '实收金额',
                            data: xData,
                            type: 'line',
                            itemStyle: {
                                color: '#409EFF', //改变折线点的颜色
                                lineStyle: {
                                    color: '#409EFF', //改变折线颜色
                                },
                            },
                        },
                    ],
                });
                // }
            },
        },
    };
</script>

<style lang="scss" scoped>
    .vs-table-box {
        grid-row-gap: 40px;
        grid-column-gap: 20px;
        min-height: 300px;
        .room-chin {
            padding: 20px 30px;
            margin-right: 30px;
            img {
                width: 100px;
                height: 100px;
                margin-right: 20px;
                border-radius: 8px;
                box-shadow: 0 2px 20px 2px #00000029;
            }
            > div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }
    }
</style>
